<template>
    <div class="container">
        <div class="app-container">
            <!-- 展示树形结构 组织架构 -->
            <el-tree :default-expand-all="true" :data="depts" :props="defaultProps">
                <!-- 节点结构 -->
                <template v-slot="{ data }">
                    <el-row type="flex" justify="space-between" align="middle">
                        <el-col>{{ data.name }}</el-col>
                        <el-col :span="4">
                            <el-dropdown trigger="click">
                                <span class="el-dropdown-link">
                                    {{ data.managerName }}操作<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>添加子部门</el-dropdown-item>
                                    <el-dropdown-item>编辑部门</el-dropdown-item>
                                    <el-dropdown-item>删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </el-col>
                    </el-row>
                </template>
            </el-tree>
        </div>
    </div>
</template>

<script>
import {getList} from '@/api/department'
import {treeDataTranslate} from '@/utils/index'
export default {
    name: 'department',
    created(){
        this.getList()
    },
    data() {
        return {
            depts: [], //属性数据
            defaultProps: {
                label: 'name',
                children: 'children'
            }
        }
    },
    methods: {
        async getList(){
            let data = await getList()
            console.log('组织架构',data);
            this.depts = treeDataTranslate(data,0)
        }
    }
}
</script>

<style scoped>
.app-container {
    /* padding: 30px 140px; */
    font-size: 14px;
}

.tree-manager {
    width: 50px;
    display: inline-block;
    margin: 10px;
}
</style>